<template>
	<div class="sell">
    <div class="sell_top" >
      <div class="sell_top_left" :class="item.class"  v-for="item in sell">
        <h3>{{item.world}}</h3>
        <p>{{item.title}}</p>
        <img :src="item.img" >
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="sell_title">最新匠作</div>
    <div class="sell_all">
    	<div class="sell_all_main" v-for="items in getlist">
        <router-link :to="{name:'Carts',params:{id:items.id}}">
    	  <img :src="items.head" />
    	  <p>{{items.title}}</p>
    	  <li>{{items.word}}</li>
    	  <h5>{{items.price}}</h5>
        </router-link>
    	</div>

    </div>
    <div style="clear: both;"></div>
    <div class="more" @click="getmore()"><Button type="success" long >{{more}}~</Button></div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        num:4,
        more:'点击召唤'
      }
    },
    computed:{
      ...mapState(['sell','sell_all']),
      getlist:function(){
      	let isArray=[];
      	for(let i=0;i<this.num;i++){
      		isArray[i]=this.sell_all[i];
      	}
      	return isArray;
      }
    },
    created(){


    },
    methods:{
      getmore:function(){
      	if(this.num<this.sell_all.length){
      		this.num+=2;
      	}
      	if(this.num>=this.sell_all.length){
      		this.more="加载到底了";
      	}
      }
    },
    watch:{

    }
  }

</script>

<style scoped>
  .sell_top{overflow: hidden;}
  .sell_top_left img{width: 60px;height: 40px;text-align: center;border-radius:15px; box-shadow: 1px 5px 1px #464c5b;}
  .sell_top_left{width:50%;float: left;border: 1px solid gainsboro;}
  .one img{width:100%;height: 80px;margin-top: 16px;}
  .one p,.one h3{text-align: center;margin-top: 10px;}
  .two,.three{float: right;height: 81px;}
  .two img,.three img{float: right;width: 50%;margin-top: -35px;}
  .two p,.two h3,.three p,.three h3{width: 50%;margin-top: 10px;}
  .sell_title{text-align: center;font-size: 16px;font-weight: bolder;height: 40px;line-height: 40px;}
  .sell_all{overflow: hidden;}
  .sell_all_main{width: 47%;float: left;margin-left: 1.5%;margin-right: 1.5%;}
  .sell_all img{width: 100%;height: 100px; }
  .sell_all_main p,.sell_all_main h5,.sell_all_main li{color: gainsboro;font-size: 12px;}
  .sell_all_main li{list-style: none;}
  .sell_all_main h5{color: orangered;}
  .more{padding-bottom: 60px;text-align: center;font-size: 16px;cursor: pointer;}
</style>
